<script setup name="subabsent">
import OAPageHeader from '@/components/OAPageHeader.vue';
import absentHttp from '@/api/absentHttp';
import { ref, reactive, onMounted } from "vue"
import { ElMessage } from 'element-plus';
import timeFormatter from '@/utils/timeFormatter';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';

let absents = ref([])
let absentFormRef = ref()
let dialogFormVisible = ref(false)
let pagination = reactive({
    total: 0,
    page: 1
})
let handleindex = -1

let absentform = reactive({
    status: 2,
    response_content: ''
})

onMounted(async (value) => {
    try {
        let data = await absentHttp.getSubAbsents()
        pagination.total = data.count;
        absents.value = data.results;
    } catch (detail) {
        ElMessage.error(detail)
    }
})

let rules = reactive({
    status: [
        { required: true, message: '请按规则处理考勤', trigger: 'change' },
    ],
    response_content: [
        { required: true, message: '请回复意见', trigger: 'blur' },
    ],
})

const onShowDialog = (index) => {
    absentform.response_content = ''
    dialogFormVisible.value = true;
    handleindex = index
}

const onSubmitAbsent = () => {
    absentFormRef.value.validate(async (valid, fields) => {
        if(valid){
            try{
                const absent = absents.value[handleindex]
                const data = await absentHttp.handleSubAbsent(absent.id, absentform.status, absentform.response_content)
                absents.value.splice(handleindex, 1, data)
                dialogFormVisible.value = false
                ElMessage.success("已经成功处理")
            }catch(detail){
                ElMessage.error(detail)
            }
            }       
    })
}


</script>

<template>

    <OAMain title="下属考勤">
        <el-card>
            <el-table :data="absents">
                <el-table-column prop="title" label="标题" />
                <el-table-column label="发起人">
                    <template #default="scope">
                        {{ "[" + scope.row.apllicant.department.name + "]" + scope.row.apllicant.realname }}
                    </template>
                </el-table-column>
                <el-table-column prop="absent_type.name" label="请假类型" />
                <el-table-column prop="request_content" label="原因" />
                <el-table-column prop="create_time" label="发起时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="start_date" label="开始日期" />
                <el-table-column prop="end_date" label="结束日期" />
                <el-table-column prop="reviewer.realname" label="审批人"></el-table-column>

                <el-table-column prop="response_content" label="审批意见" />
                <!-- 这里的el-table-column就是子组件， myabsent(my.vue也即本身)就是父组件-->
                <!-- #default="scope"是插槽作用域语法 -->
                <el-table-column prop="response_content" label="状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.status == 1">审核中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="danger" v-else>不通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="处理">
                    <template #default="scope">
                        <!-- icon后面写图标名称就行，如果使用:icon，则要导入 -->
                        <el-button v-if="scope.row.status == 1" type="primary" icon="Edit" @click="onShowDialog(scope.$index)"/>
                        <el-button v-else="scope.row.status==1" disabled type="default">已处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>

    <OADialog title="处理考勤" v-model="dialogFormVisible" @submit="onSubmitAbsent">
        <!-- label-width也可以在el-form统一指定 -->
        <el-form :model="absentform" :rules="rules" ref="absentFormRef" label-width="100px">
            <el-form-item label="结果" prop="status">
                <el-radio-group v-model="absentform.status">
                    <el-radio :value="2">通过</el-radio>
                    <el-radio :value="3">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="response_content">
                <el-input v-model="absentform.response_content" type="textarea" autocomplete="off" />
            </el-form-item>
        </el-form>
    </OADialog>

</template>

<style scoped></style>